<template>
    <div class="footer">
        <a href="javascript:;" class="fitem" 
        :class="{active:'/'===$route.path}" @click="goTo('/')">
            <i class="iconfont icon-shouye"></i>
            <span>外卖</span>
        </a>
        <a href="javascript:;" class="fitem"
        :class="{active:'/search'===$route.path}" @click="goTo('/search')">
            <i class="iconfont icon-sousuo1"></i>
            <span>搜索</span>
        </a>
        <a href="javascript:;" class="fitem"
        :class="{active:'/order'===$route.path}" @click="goTo('/order')">
            <i class="iconfont icon-dingdan"></i>
            <span>订单</span>
        </a>
        <a href="javascript:;" class="fitem"
        :class="{active:'/profile'===$route.path}" @click="goTo('/profile')">
            <i class="iconfont icon-wode1"></i>
            <span>我的</span>
        </a>
    </div>
</template>

<script>
export default {
   methods: {
       goTo(path){
           this.$router.replace(path)
       }
   },
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../assets/stylus/mixin.styl" 
    .footer
        top-border-1px(#e4e4e4)
        position fixed
        z-index 100
        left 0
        right 0
        bottom 0
        background-color #fff
        width 100%
        height 2.7rem
        display flex
        .fitem
            display flex
            flex 1
            flex-direction column
            justify-content center
            align-items center
            margin 0.2rem
            color $text-color
            &.active 
                color $active-color
            .iconfont
                font-size:1.2rem
            span
                font-size 0.8rem
                margin 0.2rem 0


</style>